<template>
  <div class="container">
    <el-container>
      <el-header class="header">
        <span>店铺装修</span>
      </el-header>
      <el-main>
        <el-row :gutter="0">
          <!-- 左侧组件库模块 -->
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div class="left_box">
                <div class="left_box_header">
                  <span>组件库</span>
                </div>
                <div class="left_box_body">
                  <el-row :gutter="10" class="left_box_body_row">
                    <el-col
                      :span="8"
                      :key="item.type"
                      v-for="item in fixedList"
                    >
                      <div class="Icon_box" @click="dealList('append', item)">
                        <el-image :src="item.icon"></el-image>
                        <span>{{ item.title }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="left_box_floor">
                  <el-button size="small" type="primary" @click="getdata('set')">保存页面</el-button>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 中间显示模块 -->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div class="center_box">
                <!-- 音乐盒子 -->
                <div class="drag_music" v-if="ifHadType" @click="dealList('edit', 0)">
                  <img src="../assets/images/music.png" alt="" />
                </div>
                <!-- 可拖拽区域 -->
                <draggable
                  v-model="DraggableList"
                  @update="datadragEnd"
                  :options="{ animation: 500 }"
                >
                  <transition-group>
                    <div
                      v-for="(element, index) in DraggableList"
                      :key="index"
                      class="drag-item"
                      @click="dealList('edit', index)"
                    >
                      <!-- 删除按钮 -->
                      <span
                        class="deleteBtn"
                        v-if="element.type !== 'music'"
                        @click.stop="dealList('delete', index)"
                        >删除</span
                      >
                      <!-- 文字 -->
                      <div class="drag_font" v-if="element.type == 'font'">
                        <p
                          :style="{
                            'font-size': element.data.size + 'px',
                            color: element.data.color,
                            'text-align': element.data.align,
                          }"
                        >
                          {{ element.data.value }}
                        </p>
                      </div>

                      <!-- 图片 -->
                      <div class="drag_img" v-if="element.type == 'image'">
                          <el-image :src="`${element.data.url === null ? imgBannerDefault : element.data.url }`"></el-image>
                      </div>

                      <!-- 视频 -->
                      <div class="drag_video" v-if="element.type == 'video'">
                        <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
                      </div>

                      <!-- 九宫格 -->
                      <div
                        class="draggrid"
                        v-if="
                          element.type == 'grid' && element.data.style == '2'
                        "
                      >
                        <el-row>
                          <el-col
                            :key="item.title + index"
                            v-for="(item, index) in element.menuData"
                            :span="8"
                            :style="{
                              'border-right':
                                (index + 1) % 3 == 0 ? '' : border_right,
                            }"
                          >
                            <el-image v-if="item.icon" :src="item.icon"></el-image>
                            <el-image v-else :src="imgDefault"></el-image>
                            <p>{{ item.title }}</p>
                          </el-col>
                        </el-row>
                      </div>
                      <div
                        class="draggrid_list"
                        v-if="
                          element.type == 'grid' && element.data.style == '1'
                        "
                      >
                        <div
                          class="draggrid_list_item"
                          :key="item.title + index"
                          v-for="(item, index) in element.menuData"
                        >
                          <span class="item-left">
                            <el-image v-if="item.icon" :src="item.icon"></el-image>
                            <el-image v-else :src="imgDefault"></el-image>
                            <span>{{ item.title }}</span>
                          </span>
                          <em class="el-icon-arrow-right"></em>
                        </div>
                      </div>

                      <!-- 底部导航 -->
                      <div class="drag_menu" v-if="element.type == 'menu'">
                        <el-row>
                          <el-col
                            :span="
                              24 / element.menuData.length
                            "
                            :key="item.title + index"
                            v-for="(item, index) in (element.menuData.length > 0 ? element.menuData : [])"
                          >
                            <div
                              class="menu_item"
                              :style="{
                                color: element.data.color,
                                backgroundColor: element.data.bgcolor,
                              }"
                            >
                              <el-image
                                :src="item.icon != null ? item.icon: imgDefault"
                                style="width: 30px; height: 30px"
                              ></el-image>
                              <p>{{ item.title }}</p>
                            </div>
                          </el-col>
                        </el-row>
                      </div>

                      <!-- 轮播图 -->
                      <div class="drag_slider" v-if="element.type == 'slider'">
                        <el-carousel height="110px">
                          <el-carousel-item
                            v-for="(item, index) in (element.data.length > 0 ? element.data : [{url:null}])"
                            :key="index+item.url"
                          >
                            <el-image fit="cover" :src="item.url !== null ? item.url : imgBannerDefault"></el-image>
                          </el-carousel-item>
                        </el-carousel>
                      </div>

                      <!-- 防伪信息 -->
                      <div
                        class="drag_security"
                        v-if="element.type == 'security'"
                      >
                        <div class="title_box">
                          <span>{{ element.data.title }}</span>
                        </div>
                        <p v-show="element.data.showcode == 1">您所查询的防伪码为:847032393432423</p>
                        <el-image
                          :src="element.data.trueimg"
                          :style="{
                            'width': '60px',
                            'height': '60px',
                            'margin-top': element.data.showcode == 1 ? '0': '16px'
                          }"
                        ></el-image>
                        <p>
                          您好,你所查询的溯源码是白水源兴果业有限公司种植生产的健康水果,感谢您的查询
                        </p>
                        <p v-show="element.data.showdetail == 1">
                          <el-button size="mini" plain>扫码明细</el-button>
                        </p>
                      </div>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </el-col>
          <!-- 右侧编辑模块 -->
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <div class="right_box">
                <!-- 音乐盒子编辑 -->
                <div v-if="isEditingMusic">
                    <div class="edit_title">音乐编辑</div>
                    <div class="edit_item">
                      <p class="edit_item_text">请选择音乐:</p>
                      <el-select v-model="DraggableList[0].data.showVal"  @change="e => handleSelectVal(e)" placeholder="请选择">
                      <el-option
                        v-for="item in DraggableList[0].data.list"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                    <div class="edit_item">
                      <p class="edit_item_text">隐藏音乐:</p>
                      <el-switch
                        v-model="isEditingMusic"
                        @change="dealList('delete', 0)"
                        active-color="#2d8cf0"
                        inactive-color="#ccc">
                      </el-switch>
                    </div>
                </div>
                <!-- 空白现实 -->
                <div class="empty" v-show="!ifHadEditing">
                      点击左侧预览区域选择你要编辑的对象～
                </div>
                <div
                  v-show="ifHadEditing"
                  v-for="(element, index) in DraggableList"
                  :key="element.type + index"
                  class="edit-item"
                >
                  <!-- 文字编辑 -->
                  <div
                    class="edit_font"
                    v-if="element.isEditingItem && element.type == 'font'"
                  >
                    <div class="edit_title">文字编辑</div>
                    <div class="edit_item">
                      <p class="edit_item_text">文字内容:</p>
                      <el-input
                        v-model="element.data.value"
                        label="描述文字"
                      ></el-input>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">字体大小:</p>
                      <el-input-number
                        v-model="element.data.size"
                        :min="10"
                        :max="28"
                        label="描述文字"
                      ></el-input-number>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">字体颜色:</p>
                      <el-color-picker
                        v-model="element.data.color"
                      ></el-color-picker>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">对齐方式:</p>
                      <el-select
                        v-model="element.data.align"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.lable"
                          :label="item.lable"
                          :value="item.align"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>

                  <!-- 图片编辑 -->
                  <div
                    class="edit_img"
                    v-if="element.isEditingItem && element.type == 'image'"
                  >
                    <div class="edit_title">图片编辑</div>
                    <el-upload class="upload-demo"
                      accept="image/jpeg,image/jpg,image/png"
                      :before-upload="beforeAvatarUpload"
                      :auto-upload="false"
                      ref="upload"
                      action=""
                      :file-list="element.data.url == null ? [] : [element.data]"
                      :on-change="(file, fileList) => handleUploadSectionFile(file, index)"
                      :on-remove="(file, fileList) => handleRemoveImage(index, file)"
                      list-type="picture">
                       <el-button size="small" type="primary"
                        >点击上传</el-button
                      >
                      <div slot="tip" class="el-upload-tip">
                        只能上传jpg/png/jpeg文件，且不超过2MB
                      </div>
                      <el-button size="small" type="primary" v-show="element.data.value === null">点击上传</el-button>
                    </el-upload>
                    <div class="edit_item">
                      <p class="edit_item_text">跳转链接:</p>
                      <el-input
                        v-model="element.data.http_url"
                        label="链接地址"
                      ></el-input>
                    </div>
                  </div>

                  <!-- 视频编辑 -->
                  <div
                    class="edit_image"
                    v-if="element.isEditingItem && element.type == 'video'"
                  >
                    <div class="edit_title">视频编辑</div>
                     <div class="edit_item">
                      <p class="edit_item_text">标题:</p>
                      <el-input
                        v-model="element.data.title"
                        label="链接地址"
                      ></el-input>
                    </div>
                     <div class="edit_item">
                      <p class="edit_item_text">链接:</p>
                      <el-input
                        v-model="element.data.value"
                        label="链接地址"
                      ></el-input>
                    </div>
                  </div>

                  <!-- 九宫格编辑 -->
                  <div
                    class="editgrid"
                    v-if="element.isEditingItem && element.type == 'grid'"
                  >
                    <div class="edit_title">九宫格编辑</div>
                    <div class="edit_item">
                      <p class="edit_item_text">显示方式:</p>
                      <el-radio v-model="element.data.style" label="1"
                        >列表</el-radio
                      >
                      <el-radio v-model="element.data.style" label="2"
                        >宫格</el-radio
                      >
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">预制链接:</p>
                      <div>
                        <span
                          v-for="item in element.data.default_menu"
                          :key="item.id"
                        >
                          <el-checkbox
                            @change="(e) => dealList('edit', index, {
                                type: e ? 'add_menu' : 'delete_menu',
                                data: item
                            })"
                            v-model="item.checked"
                            :label="item.title"
                          >
                          </el-checkbox>
                        </span>
                      </div>
                    </div>

                    <el-button
                      @click="
                        dealList('edit', index, {
                          type: 'add_menu',
                        })
                      "
                      >+添加自定义链接</el-button
                    >

                    <div
                      class=""
                      v-for="(item, idx) in element.menuData"
                      :key="item.id"
                    >
                      <div class="grid_list edit_grid" v-if="item.checked">
                        <el-upload class="upload-demo"
                          :style="{'margin-top': '15px'}"
                          accept="image/jpeg,image/jpg,image/png"
                          :before-upload="beforeAvatarUpload"
                          :auto-upload="false"
                          ref="upload"
                          action=""
                          :show-file-list="false"
                          :on-change="(file, fileList) => handleUploadSectionFile(file, index, idx)"
                          :on-remove="(file, fileList) => handleRemoveImage(index, file)">
                            <el-image v-if="item.icon !== null && item.icon !== ''" class="upload-img" alt="" :src="item.icon"/>
                            <el-image v-else class="upload-img" alt="" :src="imgDefault"/>
                        </el-upload>
                        <div>
                          <em
                            class="el-icon-close"
                            @click="
                              dealList('edit', index, {
                                type: 'delete_menu',
                                data: element.menuData[idx],
                                dealIdx: idx,
                              })
                            "
                          ></em>
                          <div class="grid_list_input_one">
                            <el-input
                              placeholder="请输入内容"
                              v-model="item.title"
                              :disabled="item.mode === 1"
                            >
                            </el-input>
                          </div>
                          <div class="grid_list_input_two">
                            <el-input
                              placeholder="链接地址"
                              v-model="item.value"
                              :disabled="item.mode === 1"
                            >
                            </el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 音乐编辑 -->
                  <div
                    class="edit_music"
                    v-if="element.isEditingItem && element.type == 'music'"
                  >
                  </div>

                  <!-- 底部导航编辑 -->
                  <div
                    class="edit_menu"
                    v-if="element.isEditingItem && element.type == 'menu'"
                  >
                    <div class="edit_title">底部导航编辑</div>
                    <div class="edit_item">
                      <p class="edit_item_text">文字颜色:</p>
                      <el-color-picker
                        v-model="element.data.color"
                      ></el-color-picker>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">菜单背景色:</p>
                      <el-color-picker
                        v-model="element.data.bgcolor"
                      ></el-color-picker>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">预制链接:</p>
                      <div>
                        <span
                          v-for="item in element.data.default_menu"
                          :key="item.id"
                        >
                          <el-checkbox
                            @change="(e) => dealList('edit', index, {
                                type: e ? 'add_menu' : 'delete_menu',
                                data: item
                            })"
                            v-model="item.checked"
                            :label="item.title"
                          >
                          </el-checkbox>
                        </span>
                      </div>
                    </div>
                    <el-button
                      @click="
                        dealList('edit', index, {
                          type: 'add_menu',
                        })
                      "
                      >+添加自定义链接</el-button
                    >
                    <div
                      class=""
                      v-for="(item, idx) in element.menuData"
                      :key="item.id"
                    >
                      <div class="grid_list">
                        <el-upload class="upload-demo"
                          accept="image/jpeg,image/jpg,image/png"
                          :before-upload="beforeAvatarUpload"
                          :auto-upload="false"
                          ref="upload"
                          action=""
                          :show-file-list="false"
                          :on-change="(file, fileList) => handleUploadSectionFile(file, index, idx)"
                          :on-remove="(file, fileList) => handleRemoveImage(index, file)">
                            <el-image v-if="item.icon !== null && item.icon !== ''" class="upload-img" alt="" :src="item.icon"/>
                            <el-image v-else class="upload-img" alt="" :src="imgDefault"/>
                        </el-upload>
                        <div>
                          <em
                            class="el-icon-close menu_i"
                            @click="
                              dealList('edit', index, {
                                type: 'delete_menu',
                                data: element.menuData[idx],
                                dealIdx: idx
                              })
                            "
                          ></em>
                          <div class="grid_list_input_one">
                            <el-input
                              placeholder="请输入标题"
                              v-model="item.title"
                            >
                            </el-input>
                          </div>
                          <div class="grid_list_input_two">
                            <el-input
                              placeholder="链接地址"
                              v-model="item.value"
                              :disabled="item.mode === 1"
                            >
                            </el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 轮播图编辑 -->
                  <div
                    class="edit_slider"
                    v-if="element.isEditingItem && element.type == 'slider'"
                  >
                    <div class="edit_title">轮播图编辑</div>
                    <div class="edit_item">
                    <el-upload
                      class="upload-demo"
                      accept="image/jpeg,image/jpg,image/png"
                      :auto-upload="false"
                      ref="upload"
                      action=""
                      :before-upload="beforeAvatarUpload"
                      :file-list="element.data"
                      :on-change="(file, fileList) => handleUploadSectionFile(file, index)"
                      :on-remove="(file, fileList) => handleRemoveImage(index, file)"
                      list-type="picture">
                      <el-button size="small" type="primary"
                        >点击上传</el-button
                      >
                      <div slot="tip" class="el-upload-tip">
                        只能上传jpg/png/jpeg文件，且不超过2MB
                      </div>
                    </el-upload>
                    </div>
                  </div>

                  <!-- 防伪信息编辑 -->
                  <div
                    class="edit_security"
                    v-if="element.isEditingItem && element.type == 'security'"
                  >
                    <div class="edit_title">防伪信息编辑</div>
                    <div class="edit_item">
                      <p class="edit_item_text">标题:</p>
                      <el-input class="edit_item_input"
                        v-model="element.data.title"
                        :label="element.data.title"
                      ></el-input>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">防伪码:</p>
                      <el-switch
                        v-model="element.data.showcode"
                        active-color="#2d8cf0"
                        inactive-color="#ccc">
                      </el-switch>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">语音播放:</p>
                      <el-switch
                        v-model="element.data.playvoice"
                        active-color="#2d8cf0"
                        inactive-color="#ccc">
                      </el-switch>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">扫码明细:</p>
                      <el-switch
                        v-model="element.data.showdetail"
                        active-color="#2d8cf0"
                        inactive-color="#ccc">
                      </el-switch>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">查询正确图片:</p>
                       <el-upload class="upload-demo"
                          accept="image/jpeg,image/jpg,image/png"
                          :before-upload="beforeAvatarUpload"
                          :auto-upload="false"
                          ref="upload"
                          action=""
                          :show-file-list="false"
                          :on-change="(file, fileList) => handleUploadSectionFile(file, index, 'trueimg')"
                          :on-remove="(file, fileList) => handleRemoveImage(index, file, 'trueimg')">
                            <el-image v-if="element.data.trueimg" class="upload-img" alt="" :src="element.data.trueimg"/>
                            <el-image v-else class="upload-img" alt="" :src="imgDefault"/>
                      </el-upload>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">查询重复图片:</p>
                      <el-upload class="upload-demo"
                          accept="image/jpeg,image/jpg,image/png"
                          :before-upload="beforeAvatarUpload"
                          :auto-upload="false"
                          ref="upload"
                          action=""
                          :show-file-list="false"
                          :on-change="(file, fileList) => handleUploadSectionFile(file, index, 'repeatimg')"
                          :on-remove="(file, fileList) => handleRemoveImage(index, file, 'repeatimg')">
                            <el-image v-if="element.data.repeatimg" class="upload-img" alt="" :src="element.data.repeatimg"/>
                            <el-image v-else class="upload-img" alt="" :src="imgDefault"/>
                      </el-upload>
                    </div>
                    <div class="edit_item">
                      <p class="edit_item_text">查询错误图片:</p>
                      <el-upload class="upload-demo"
                          accept="image/jpeg,image/jpg,image/png"
                          :before-upload="beforeAvatarUpload"
                          :auto-upload="false"
                          ref="upload"
                          action=""
                          :show-file-list="false"
                          :on-change="(file, fileList) => handleUploadSectionFile(file, index, 'falseimg')"
                          :on-remove="(file, fileList) => handleRemoveImage(index, file, 'falseimg')">
                            <el-image v-if="element.data.falseimg" class="upload-img" alt="" :src="element.data.falseimg"/>
                            <el-image v-else class="upload-img" alt="" :src="imgDefault"/>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
// import qs from 'qs'
// 引入拖拽插件
import draggable from 'vuedraggable'
// 引入http请求
import http from '../helpers/ServiceBase'
export default {
    data () {
        return {
            fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
            DraggableList: [],
            imgUploadUrl: window.zlm.API.Image,
            imgPreview: window.zlm.API.Preview,
            imgDefault: require('@/assets/images/default.png'),
            imgBannerDefault: require('@/assets/images/slider_default.jpg'),
            imgNavDefault: require('@/assets/images/menu.png'),
            imgGridDefault: require('@/assets/images/grid.png'),
            imgUploadParams: {
                key: window.zlm.getSearchParams('key'),
                action: 'upload'
            },
            sliderUploadParams: {
                key: window.zlm.getSearchParams('key'),
                action: 'upload',
                type: 'slider'
            },
            fixedList: [
                {
                    type: 'music',
                    title: '背景音乐',
                    icon: require('@/assets/images/icon-music.png'),
                    data: {
                        selectedVal: '',
                        showVal: '',
                        list: []
                    }
                },
                {
                    type: 'font',
                    title: '文字',
                    icon: require('@/assets/images/font.png'),
                    data: {
                        value: '这是一段文字',
                        size: '14',
                        color: '#ff6633',
                        align: 'center'
                    }
                },
                {
                    type: 'slider',
                    icon: require('@/assets/images/slider.png'),
                    title: '顶部轮播图',
                    data: []
                },
                {
                    type: 'image',
                    title: '单张图片',
                    icon: require('@/assets/images/image.png'),
                    data: {
                        name: '',
                        url: null,
                        uid: 1,
                        http_url: 'http://baidu.com'
                    }
                },
                {
                    type: 'video',
                    title: '视频',
                    icon: require('@/assets/images/video.png'),
                    data: {
                        title: '我的家乡',
                        value: 'https://www.bilibili.com/video/BV1UT4y1A7U9'
                    }
                },
                {
                    type: 'grid',
                    title: '九宫格',
                    icon: require('@/assets/images/grid.png'),
                    data: {
                        style: '1',
                        default_menu: []
                    },
                    menuData: [
                        {
                            id: 9999,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        },
                        {
                            id: 9998,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        },
                        {
                            id: 9997,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        }
                    ]
                },
                {
                    type: 'security',
                    title: '防伪信息',
                    icon: require('@/assets/images/security.png'),
                    data: {
                        title: '防伪查询中心',
                        showcode: 1,
                        playvoice: 1,
                        showdetail: 1,
                        trueimg: require('@/assets/images/security/trueimg.png'),
                        repeatimg: require('@/assets/images/security/repeatimg.png'),
                        falseimg: require('@/assets/images/security/falseimg.png')
                    }
                },
                {
                    type: 'menu',
                    title: '底部导航',
                    icon: require('@/assets/images/menu.png'),
                    data: {
                        color: '#333',
                        bgcolor: '#fff',
                        default_menu: []
                    },
                    menuData: [
                        {
                            id: 9999,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        },
                        {
                            id: 9998,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        },
                        {
                            id: 9997,
                            title: '默认文字',
                            icon: null,
                            mode: 2,
                            checked: true,
                            value: '链接'
                        }
                    ]
                }
            ],
            options: [
                {
                    align: 'left',
                    lable: '左对齐'
                },
                {
                    align: 'center',
                    lable: '居中对齐'
                },
                {
                    align: 'right',
                    lable: '右对齐'
                }
            ],
            checkList: [],
            color1: '#409EFF',
            color2: null,
            border_right: '.5px solid #eee',
            ifHadEditing: false,
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: false, // 如果true,浏览器准备好时开始回放。
                controls: true, // 控制条
                preload: 'auto', // 视频预加载
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: 'video/mp4',
                        src: '' // 你所放置的视频的地址，最好是放在服务器上
                    }
                ],
        //  poster: 'http://39.106.117.192:8080/static/indexImg.png', // 你的封面地址（覆盖在视频上面的图片）
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            },
            isEditingMusic: false,
            musicList: []
        }
    },
    components: {
        draggable,
        videoPlayer
    },
    methods: {
        getdata (type) {
            const promise = new Promise((resolve, reject) => {
                if (type === 'get') {
                    // 获取保存的数据
                    this.postRequest(window.zlm.API.Data, { action: 'read', key: window.zlm.getSearchParams('key') }).then((res) => {
                        if (res.code === 0 && res.layout !== null && res.layout !== [] && window.zlm.getSearchParams('key') !== null) {
                            this.DraggableList = []
                            for (let index = 0; index < res.layout.length; index++) {
                                const element = res.layout[index]
                                this.DraggableList.push({
                                    ...element,
                                    isEditingItem: false
                                })
                            }
                        } else {
                            this.setInitDraggableList()
                        }
                        resolve(true)
                    })
                } else if (type === 'set') {
                    // 保存最新修改的数据
                    this.postRequest(window.zlm.API.Data, { action: 'write', key: window.zlm.getSearchParams('key'), layout: JSON.stringify(this.DraggableList) }).then((res) => {
                        if (res.code === 0) {
                          // 表示保存成功，弹出倒计时小框提示用户：排版保存成功
                            window._g.toastMsg('success', '保存成功')
                        } else {
                          // 保存失败,将data.msg内容弹框给用户看
                            window._g.toastMsg('error', res.msg)
                        }
                        resolve(true)
                    })
                }
            })
            return promise
        },
        setInitDraggableList () {
            this.DraggableList = []
            // 数据为空则取默认数据 //切记深拷贝 -- 双层数组
            for (let index = 0; index < this.fixedList.length; index++) {
                const element = this.fixedList[index]
                this.DraggableList.push({
                    ...JSON.parse(JSON.stringify(element)),
                    isEditingItem: false
                })
            }
        },
        getMusicList () {
            this.postRequest(window.zlm.API.Config, { action: 'music' }).then((res) => {
                if (res.code === 0) {
                    // 表示读取成功，开始呈现列表让用户选择加入的背影音乐
                    this.musicList = res.list
                } else {
                // 读取失败,将data.msg内容弹框给用户看
                    window._g.toastMsg('error', res.msg)
                }
            })
        },
        getGridList () {
            this.postRequest(window.zlm.API.Config, { action: 'method' }).then((res) => {
                if (res.code === 0) {
                // 表示读取成功，开始呈现checkbox给用户选择
                    // window._g.toastMsg('success', '读取成功')
                    // 改drableblelist ---不能覆盖，
                    const _resList = res.list
                    for (let i = 0; i < this.DraggableList.length; i++) {
                        if (this.DraggableList[i].type === 'grid' || this.DraggableList[i].type === 'menu') {
                            // 处理数组中menu及default_menu
                            const _list = this.DraggableList[i].data.menuData
                            this.DraggableList[i].data.default_menu = this.initDefaultMenu(_resList, _list)
                        }
                    }
                    // fixedList
                    for (let i = 0; i < this.fixedList.length; i++) {
                        if (this.fixedList[i].type === 'grid' || this.fixedList[i].type === 'menu') {
                          // 处理数组中menu及default_menu
                            this.fixedList[i].data.default_menu = this.initDefaultMenu(_resList)
                        }
                    }
                } else {
                // 读取失败,将data.msg内容弹框给用户看
                    window._g.toastMsg('error', res.msg)
                }
            })
        },
        initDefaultMenu (array, list) {
            var _defaultlist = []
            for (let idx = 0; idx < array.length; idx++) {
                const element = array[idx]
                _defaultlist.push({
                    ...element,
                    checked: list ? this.ifHadInMenu(list, element.title) : false
                })
            }
            return _defaultlist
        },
        ifHadInMenu (array, title) {
            var _flag = false
            for (let index = 0; index < array.length; index++) {
                const element = array[index]
                if (element.title === title) {
                    _flag = true
                    break
                }
            }
            return _flag
        },
        handleUploadSectionFile (file, index, dealIdx) {
            var type = this.DraggableList[index].type
            var formData = new FormData()
            formData.append('key', this.imgUploadParams.key)
            formData.append('action', this.imgUploadParams.action)
            // formData.append('type', type)
            formData.append('type', 'image')
            formData.append('file', file.raw)

            this.uploadRequest(this.imgUploadUrl, formData)
              .then((res) => {
                  var _imgUrl = 'slider/1614169842.jpeg'
                  // 开发环境配置代理接口请求成功但是代理服务器没有图片资源，此时默认取demo图
                  if (res.code === 0) {
                      _imgUrl = res.msg
                  }

                  // 设置图片
                  switch (type) {
                  case 'image':
                      this.DraggableList[index].data = {
                          ...this.DraggableList[index].data,
                          name: `${_imgUrl}`,
                          url: `${this.imgPreview}${_imgUrl}`,
                          uid: file.uid
                      }
                      break
                  case 'slider':
                      this.DraggableList[index].data.push({
                          name: file.name,
                          url: `${this.imgPreview}${_imgUrl}`,
                          uid: file.uid
                      })
                      break
                  case 'security':
                      this.DraggableList[index].data[dealIdx] = `${this.imgPreview}${_imgUrl}`
                      break
                  case 'menu':
                  case 'grid':
                      this.DraggableList[index].menuData[dealIdx].icon = `${this.imgPreview}${_imgUrl}`
                      break
                  default:
                      break
                  }
              })
              .catch((res) => {
              })
        },
        fetchRemoveImage (type, name) {
            this.postRequest(window.zlm.API.Image, { action: 'delete', key: this.imgUploadParams.key, type: 'image', name: name })
        },
        handleRemoveImage (index, file) {
            var type = this.DraggableList[index].type
            switch (type) {
            case 'image':
                this.DraggableList[index].data = {
                    ...this.DraggableList[index].data,
                    name: '',
                    url: null,
                    uid: 1
                }
                break
            case 'slider':
                var _newSliderList = []
                // 移除轮播图对应名称的图
                for (let idx = 0; index < this.DraggableList[index].data.length; idx++) {
                    const element = this.DraggableList[index].data[idx]
                    if (element.uid !== file.uid) {
                        _newSliderList.push(element)
                    }
                }
                this.DraggableList[index].data = _newSliderList
                break
            default:
                break
            }
            this.fetchRemoveImage(type, file.name)
        },
        handleSelectVal (e) {
            const _list = this.DraggableList[0].data.list
            for (let index = 0; index < _list.length; index++) {
                const element = _list[index]
                if (element.value === e) {
                    // selectedVal 用于移动端播放
                    // showVal 用于页面显示
                    this.DraggableList[0].data.selectedVal = e
                    this.DraggableList[0].data.showVal = element.name
                }
            }
        },
        beforeAvatarUpload (file) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isLt2M
        },
        datadragEnd (evt) {
            evt.preventDefault()
        },

        // 处理DraggableList
        // idx 默认为DraggableList 对应的索引位置
        dealList (type, idx, itemchild = { type: 'toEdit' }) {
            switch (type) {
            case 'append':
                // 此时idx 为对象
                // TODO 如果type === 'music' &&  ifHadType  不再添加
                if (idx.type === 'music') {
                    if (!this.ifHadType) {
                        this.DraggableList.unshift(JSON.parse(JSON.stringify(idx)))
                    }
                } else {
                    // 将新增的变为正在编辑的
                    for (let index = 0; index < this.DraggableList.length; index++) {
                        this.DraggableList[index].isEditingItem = false
                    }
                    this.DraggableList.push({
                        ...JSON.parse(JSON.stringify(idx)),
                        isEditingItem: true
                    })
                }
                this.ifHadEditing = true
                break
            case 'delete':
                // if (this.DraggableList[idx].type === 'music') {
                //     this.isEditingMusic = false
                // }
                this.isEditingMusic = false
                this.ifHadEditing = false
                this.DraggableList.splice(idx, 1)
                break
            case 'edit':
                this.dealEdit(itemchild, idx)
                break
            }
        },
        dealEdit (itemchild, idx) {
            switch (itemchild.type) {
            case 'add_menu':
            case 'delete_menu':
                this.editGrid(idx, itemchild)
                break
            default:
          // 转化为编辑中
                this.changeEditingItem(idx)
                break
            }
        },
        editGrid (idx, data) {
      // dealIdx 为处理的menu的item的下标
            var item = this.DraggableList[idx]
            var _menu = item.menuData
            var _defaultMenu = item.data.default_menu
            switch (data.type) {
            case 'add_menu':
                if (item.type === 'menu' && _menu.length && _menu.length >= 4) {
                    window._g.toastMsg('error', '底部导航不能超过4个')
                    if (data.data) {
                        _defaultMenu = this.setDefaultMenu(data.data, _defaultMenu, false)
                    }
                    return
                }
                _menu.push(data.data ? {
                    ...data.data,
                    icon: `${this.imgPreview}${data.data.icon}`
                } : {
                    title: '默认文字',
                    icon: null,
                    mode: 2,
                    value: '默认链接',
                    id: 10000 + _menu.length,
                    checked: true
                })
                // 设置default_menu 选中与否
                if (data.data) {
                    _defaultMenu = this.setDefaultMenu(data.data, _defaultMenu, true)
                }
                break
            case 'delete_menu':
                // mode === 1 内置链接
                // mode === 2 自定义链接
                var dealIdx = data.dealIdx
                if (!dealIdx) {
                    dealIdx = this.getDeleteItemIdx(_menu, data.data)
                }
                _menu.splice(dealIdx, 1)
                // 设置default_menu 选中与否
                _defaultMenu = this.setDefaultMenu(data.data, _defaultMenu, false)
                break
            default:
                break
            }
            this.DraggableList[idx].menuData = _menu
            this.DraggableList[idx].data.default_menu = _defaultMenu
        },
        setDefaultMenu (data, array, checked) {
            return array.map(item => ({
                ...item,
                checked: data.id === item.id ? checked : item.checked
            }))
        },
        getDeleteItemIdx (array, data) {
            let dealIdx
            for (let index = 0; index < array.length; index++) {
                const element = array[index]
                if (element.id === data.id) {
                    dealIdx = index
                }
            }

            return dealIdx
        },
        changeEditingItem (idx) {
            this.ifHadEditing = true
            var _dealList = this.DraggableList
            for (let index = 0; index < _dealList.length; index++) {
                this.isEditingMusic = _dealList[idx]?.type === 'music'
                if (this.isEditingMusic) {
                    _dealList[idx].data.list = this.musicList
                }
                if (index === idx) {
                    _dealList[index].isEditingItem = true
                } else {
                    _dealList[index].isEditingItem = false
                }
            }
        },
        // 判断是否为整型
        isInteger: function (obj) {
            return typeof obj === 'number' && obj % 1 === 0
        },
        retainChecked: function (arr, maxLength) {
            var _list = []
            for (let index = 0; index < arr.length; index++) {
                const element = arr[index]
                if (element.checked) {
                    _list.push(element)
                }
            }
            if (maxLength != null && _list.length > maxLength) {
                _list = _list.slice(0, maxLength)
            }
            return _list
        }
    },
    mixins: [http],
    computed: {
        ifHadType () {
            var flag = false
            for (let index = 0; index < this.DraggableList.length; index++) {
                if (this.DraggableList[index].type === 'music') {
                    flag = true
                    break
                }
            }
            return flag
        }
    },
    created () {
        // todo 接口请求数据为空则取默认值
        this.getMusicList()
        if (window.zlm.getSearchParams('action') === '1') {
            this.setInitDraggableList()
            this.getGridList()
        } else {
            this.getdata('get').then(() => {
                this.getGridList()
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container{
  min-width: 1000px;
}
.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  span {
    font-size: 18px;
    border-left: 5px solid #00aeff;
    padding-left: 10px;
  }
}
.left_box,
.center_box,
.right_box {
  border: 1px solid #ccc;
  margin: 15px 20px 0px 15px;
}
.center_box {
  margin: 20px auto;
  height: 80vh;
  overflow: auto;
  max-width: 240px;
}
// 左侧组件库模块
.left_box {
  padding: 30px 20px 0 20px;
}
.left_box_header {
  height: 30px;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  span {
    border-left: 5px solid #00aeff;
    padding-left: 10px;
  }
}
.left_box_body {
  font-size: 14px;
  padding: 20px 0 10px;
  border-bottom: 1px solid #ccc;
}
.Icon_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  margin-bottom: 10px;
  width: 100%;
  height: 70px;
  border: 1px solid #ccc;
  background-color: #eee;
  text-align: center;
  cursor: pointer;
  .el-image {
    display: block;
    margin-bottom: 5px;
    padding-top: 10px;
    width: 30px;
    height: 30px;
  }
  span {
    color: #666666;
    font-size: 12px;
  }
}
.left_box_floor {
  text-align: right;
  padding: 20px 0;
}
// -------------------- 中间拖拽模块
.drag-item {
  width: 100%;
  text-align: center;
  margin: auto;
  position: relative;
  // background: rgb(68, 226, 5);
}
.ghostClass {
  opacity: 1;
}
.bottom {
  width: 200px;
  height: 50px;
  position: relative;
  background: blue;
  top: 2px;
  left: 2px;
  transition: all 0.5s linear;
}
.drag_font {
  p {
    padding: 10px 16px;
  }
}
.drag_img {
  //  height: 140.73px;
  .el-image {
    width: 100%;
    margin-bottom: -2.5px;
    // height: 100% !important;
  }
}
// .drag_video {

// }
.draggrid {
  text-align: center;
  color: black;
  font-size: 16px;
  .el-col {
    border-bottom: 1px solid #eee;
  }
  .el-image {
    margin-top: 6px;
    width: 44px;
    height: 40px;
  }
  p {
    display: block;
    margin: 5px 0 6px;
    font-weight: normal;
    color: #333;
    font-size: 12px;
  }
}
.draggrid_list {
  div.draggrid_list_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    height: 48px;
    align-items: center;
    padding: 0 16px;
    .item-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 48px;
      span{
        font-size: 14px;
        color: #333;
        font-weight: normal;
      }
    }
    .el-image {
      width: 30px;
      height: 30px;
      padding: 0;
      margin-right: 10px;
    }
  }
}
.center_box {
  position: relative;
}
.drag_music {
  position: relative;
  z-index: 999;

  img {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
  }
}
.drag_menu {
  .menu_item {
    padding: 12px 0;
    p {
      font-size: 12px;
      margin-top: 5px;
      text-overflow: ellipsis;
      overflow: hidden;/*超出部分隐藏*/
      white-space: nowrap;/*不换行*/
    }
  }
}
.drag_slider {
  .el-image {
    height: 100%;
  }
}
.drag_security {
  span {
    font-size: 14px;
    height: 44px;
    line-height: 44px;
    color: #333;
  }
  .title_box{
    padding-left: 10px;
    text-align: left;
    border-bottom: 0.5px solid #eee;
  }
  p {
    font-size: 12px;
    margin: 10px 40px;
    color: #666;
  }
}
.deleteBtn {
  font-size: 14px;
  padding: 1px 4px;
  border-radius: 2px;
  z-index: 999;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
}

// 右侧编辑模块
.right_box {
  background-color: #e6f9ff;
  font-size: 14px;
  font-weight: 700;
  padding: 0 20px;
  min-width: 500px;
  box-sizing: border-box;
  .empty{
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 16px;
  }
}
.edit_title {
  color: #333;
  font-size: 16px;
  font-weight: normal;
  border-left: solid #00aeff 5px;
  padding-left: 8px;
  margin: 20px 0px;
}
.edit_item {
  position: relative;
  display: flex;
  margin: 20px 0px;
  flex-direction: row;
  align-items: center;
  .edit_item_text {
    min-width: 80px;
    color: #666666;
    font-size: 14px;
    padding-right: 6px;
    font-weight: normal;
  }
  .upload-img{
    width: 80px;
    height: 80px;
  }
}
.el-icon-close:before {
      content: "\e6db";
      position: absolute;
      right: 0;
      color: white;
      background: red;
      border-radius: 50%;
}
.edit_img {
  .el-upload {
    padding: 10px 0;
    width: 100%;
    .avatar{
      width: 100%;
    }
  }
  button {
    margin-left: 5px;
  }
}
.editgrid,
.edit_menu {
  h2 {
    height: 60px;
    line-height: 60px;
  }
  .el-checkbox-group,
  p {
    display: inline;
  }
  .el-checkbox {
    margin: 0px 2px;
  }
  // span{
  //   display: flex;
  // }
  .grid_p {
    width: 120px;
  }
  .grid_p1 {
    p {
      margin-right: 4px;
    }
  }
  button {
    margin: 10px 0px;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
  }
  .grid_list {
    display: flex;
    margin: 15px 0;
    align-items: center;
    .el-image {
      margin-right: 10px;
      margin-top: 17px;
    }
    div {
      position: relative;
    }
    .menu_i {
      position: absolute;
      top: 22px;
      right: -20px;
      background-color: red;
      border-radius: 50%;
      color: #fff;
    }
    .grid_list_input_one {
      width: 120px;
      margin-bottom: 5px;
    }
    .grid_list_input_two {
      width: 250px;
    }
  }
}
.edit_menu, .edit_grid{
  .upload-img{
    width: 80px;
    height: 80px;
    margin-top: 4px!important;
    border-radius: 8px;
  }
}
.edit_security{
  .edit_item_input{
    width: 180px;
  }
  .avatar-uploader{
    margin-bottom: 10px;
  }
}
.edit_slider,.edit_img{
  .el-upload-tip{
    padding-top: 10px;
    font-weight: normal;
    font-size: 14px;
    color: #333333;
  }
}
</style>
